<meta charset="UTF-8">

<div id="addgroup">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.addGroup")}}</h3>
        <div>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("reportForm.selectAccount")}} : &nbsp;</i-col>
                <i-col span="8" style="height: 100%;line-height:32px;">
                    <el-select v-model="createrToUser" style="width: 100%;" size="mini" filterable>
                        <el-option v-for="item in userlists" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </i-col>
            </Row>

            <Row style="margin: 10px 0">
                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("group.groupName")}} : &nbsp;</i-col>
                <i-col span="8">
                    <i-input v-model.trim="groupname"></i-input>
                </i-col>
                <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                    <span>
                            <Icon type="star"></Icon> {{$t("group.groupNameTip")}} 
                        </span>
                </i-col>
            </Row>


            <Row style="margin: 10px 0">
                <i-col span="6" :offset="6">
                    <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                </i-col>
                <i-col span="6" :offset="1">
                    <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                </i-col>
            </Row>
        </div>
    </div>

    <script>
        vueInstanse = new Vue({
            el: "#addgroup",
            i18n: utils.getI18n(),
            data: {
                groupname: "",
                mintime: 30,
                maxtime: 3600,
                groupname: "",
                iconState: "ios-arrow-down",
                isShowMatchDev: false,
                createrToUser: userName,
                userlists: [],
            },
            methods: {
                selectedUser: function(item) {
                    var me = this;
                    setTimeout(function() {
                        me.isShowMatchDev = false;
                        me.createrToUser = item.username;
                    }, 100)
                },
                handleSubmit: function() {
                    var me = this;
                    var isExist = false;
                    this.list.forEach(function(item) {
                        if (item.username === me.createrToUser) {
                            isExist = true;
                        }
                    })

                    if (!isExist) {
                        this.$Message.error(this.$t("message.selectCorrectAccount"));
                        return;
                    }

                    if (this.groupname == "") {
                        this.$Message.error(this.$t("message.fillGroupNameTip"));
                        return;
                    };
                    var url = myUrls.addGroup();
                    var data = {
                        groupname: this.groupname,
                        mintime: this.mintime,
                        maxtime: this.maxtime,
                        groupname: this.groupname,
                        creater: this.createrToUser
                    };

                    utils.sendAjax(url, data, this.doAddcallback);
                },
                doAddcallback: function(resp) {
                    if (resp.status == 0) {
                        rootuser = null;
                        this.$Message.success(this.$t("message.addSucc"));
                    } else {
                        this.$Message.error(resp.cause);
                    }
                },
                resetInfo: function() {
                    this.groupname = "";
                    this.mintime = 30;
                    this.maxtime = 3600;
                    this.usercount = "";
                    this.devicecount = "";
                    this.groupname = "";
                },

                getUserInfoList: function() {
                    var url = myUrls.queryUser();
                    utils.sendAjax(url, {
                        username: userName
                    }, this.doUserInfoList);
                },
                doUserInfoList: function(resp) {
                    var me = this;
                    var list = [];
                    if (resp.status == 0 && resp.userlists != null) {
                        resp.userlists.forEach(function(item) {
                            list.push({
                                username: item.username,
                                usertype: item.usertype
                            })
                        });
                    }
                    list.push({
                        username: userName,
                        usertype: vstore.state.userType
                    })
                    me.list = list;


                },
            },
            watch: {

                createrToUser: function(newVal) {
                    var index = -1;
                    this.list.forEach(function(item, idx) {
                        if (item.username === newVal) {
                            index = idx;
                        }
                    });
                    this.usertype = "";
                    if (index != -1) {

                    } else {
                        this.userTypeList = [];
                    }
                },

            },
            mounted: function() {
                this.list = [];
                var userlists = [];
                globalUserList.forEach(function(item) {
                    userlists.push({
                        label: item,
                        value: item,
                    })
                });
                me.userlists = userlists;
                this.getUserInfoList();
            }
        })
    </script>
</div>